<!--
 * @Description: 主页tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-23 09:57:39
-->
<template>
  <div class="home">
    <van-nav-bar title="首页" />
    <div class="header">
       <form action="/">
           <van-search
           v-model="params.type"
           show-action
           placeholder="请输入搜索关键词"
            @search="onSearch(o)"
            @cancel="onCancel"
            />
       </form>
     </div>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="order_list" v-if="workOrderData.list.length>0">
        <div class="order" v-for="o in workOrderData.list" :key="o.id">
          <div class="time">{{o.create_time}}</div>
          <van-row>
            <van-col span="6" style="text-align:center;font-size:90px">
            <van-icon name="bell" />
            </van-col>
            <van-col span="18" style="line-height: 2em">
              <div>类型： {{o.type}} </div>
              <div>状态： {{o.status}} </div>
              <div>设备： {{o.device_name}} </div>
              <div>工程： {{o.engineer_name}} </div>
              <div>描述： {{o.bill_why}} </div>
            </van-col>
          </van-row>
          <div class="btns">
             <van-button round hairline size="small" type="info" @click="toTakeOrderHandler(o.id)">接单</van-button>
          </div>
        </div>
      </div>
      <div v-else style="padding:2em 0;text-align:center;color:red">
        暂无工单
      </div>
   </van-pull-refresh>
  </div>
</template>
<script>
import Vue from 'vue';
import { Search } from 'vant';

Vue.use(Search);
import {get} from '../../http/axios'
import {mapState} from 'vuex'
import {Toast} from 'vant'
export default {
  data(){
    return {
      params:{
         page:1,
        pageSize:10,
        status:'待接单',
        type:''
        
      },
      loading:false,
      workOrderData:{list:[]}
    }
  },
  computed: {
    ...mapState('user',['info'])
  },
  mounted() {
    this.loadWorkOrder();
  },
  methods:{
    onRefresh(){
      setTimeout(() => {
        Toast('刷新成功');
        this.loading = false;
      }, 1000);
    },
    toTakeOrderHandler(id){
      let account_id = this.info.id;
      let params = {id,account_id}
      let url = "/workorder/takeOrder"
      get(url,params).then(resp => {
        Toast.success(resp.message)
        this.loadWorkOrder();
      })
    },
    loadWorkOrder(){
      let url = "/workorder/pageQuery"
      get(url,this.params).then(resp => {
        this.workOrderData = resp.data;
      })
    },
    onSearch() {
     // Toast(val);
      let url = "/workorder/pageQuery"
      get(url,this.params).then(resp => {
        this.workOrderData = resp.data;
        Toast.success(resp.message)
        this.loadWorkOrder();
      })
      
    },
    onCancel() {
      Toast('取消');
    }
  }
}
</script>
<style scoped>
.home {
  font-size: 13px;
  color: #555;
  padding-bottom: 50px;
  background-color: #999;
}
.header {
  padding-top: 50px;
  text-align: center;
  background: #1659a0;
  margin-bottom: 1em;
}
.home .order_list{
  padding: .5em;
}
.home .order_list > .order {
  background-image:url("../../assets/vascd.jpg");
  margin-bottom: .5em;
  border-radius: 5px;
  padding:.5em
}
.home .order_list > .order > .time {
  line-height: 2.4em;
  border-bottom: 1px solid #f4f4f4;
}
.home .order_list > .order > .btns {
  padding: .5em;
  text-align: right;
}
</style>